@charset "utf-8";

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: rgb(0, 204, 255);
  list-style: none;
}

.processingIstructionMain {
  width: 100%;
  height: auto;
  position: relative;
  top: 6px;
  min-width: 1000px;

  .headnavigation {
    width: 100%;
    height: 66px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
    color: #1e3358;
    padding-left: 42px;

    .el-breadcrumb__separator {
      color: rgb(32, 54, 75);
    }

    .el-breadcrumb__inner {
      color: rgb(32, 54, 75);
    }

    .currentPage {
      .el-breadcrumb__inner {
        color: #0e6ce0 !important;
      }
    }
  }

  .content {
    width: 100%;
    padding: 0 40px;

    .headButton {
      width: 100%;
      height: 62px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      font-size: 18px;

      .el-button {
        width: 96px;
        height: 32px;
        border: 1px solid #1992c4;
        background-color: #0f3255;
        display: flex;
        align-items: center;
        padding: 6px 23px;
        font-size: 0;

        &:active {
          opacity: 0.8;
        }

        span {
          font-size: 16px;
        }

        .el-icon-arrow-left {
          font-size: 18px;
          position: relative;
          left: -6px;
        }
      }


    }

    .newsBox {
      width: 100%;
      height: 422px;
      padding: 1px;
      background: linear-gradient(to left, #00ffff, #00ffff) left top no-repeat,
        linear-gradient(to bottom, #00ffff, #00ffff) left top no-repeat,
        linear-gradient(to left, #00ffff, #00ffff) right top no-repeat,
        linear-gradient(to bottom, #00ffff, #00ffff) right top no-repeat,
        linear-gradient(to left, #00ffff, #00ffff) left bottom no-repeat,
        linear-gradient(to bottom, #00ffff, #00ffff) left bottom no-repeat,
        linear-gradient(to left, #00ffff, #00ffff) right bottom no-repeat,
        linear-gradient(to left, #00ffff, #00ffff) right bottom no-repeat;
      background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;


      .gradient {
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(6, 17, 44, 0.9), rgba(4, 28, 70, 0.9), rgba(6, 17, 44, 0.9));
        box-shadow: inset 1px 10px 100px #103660, inset 5px -5px 5px #103660, inset -5px 5px 5px #103660, inset -5px -5px 5px #000;
        border: 1px solid rgb(8, 101, 134);
        display: flex;
        flex-direction: column;

        .title {
          width: 100%;
          height: 96px;
          line-height: 96px;
          font-size: 22px;
          padding-left: 30px;
        }

        .contentPart {
          width: 91%;
          margin: 0 auto;
          flex: 1;
          display: flex;
          justify-content: space-between;
          padding-bottom: 36px;
          font-size: 18px;

          section {
            &:nth-child(1) {
              width: 48%;

              // background-color: violet;
              &>p,
              &>div {
                display: flex;

                span {
                  &:nth-child(1) {
                    margin-right: 6%;
                    white-space: nowrap;
                  }
                }
              }

              &>div {
                height: 214px;
                margin-top: 44px;

                p {
                  height: 100%;
                  overflow-x: hidden;
                  overflow-y: auto;
                  scrollbar-width: thin;
                  scrollbar-color: rgb(36, 137, 204) #0e6ce0;
                  text-overflow: ellipsis;

                  &::-webkit-scrollbar {
                    border-radius: 10px;
                    /*滚动条整体样式*/
                    width: 6px;
                    /*高宽分别对应横竖滚动条的尺寸*/
                    height: 10px;
                    overflow-x: hidden;
                  }

                  &::-webkit-scrollbar-thumb {
                    /*滚动条里面小方块*/
                    border-radius: 10px;
                    box-shadow: inset 0 05px rgba(0, 0, 0, 0.2);
                    background: rgba(7, 132, 173, 0.5);
                  }

                  &::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    box-shadow: inset 0 05px rgba(0, 0, 0, 0.2);
                    border-radius: 10px;
                    background: rgb(10, 32, 52)
                  }
                }
              }
            }

            &:nth-child(2) {
              width: 47%;

              .fileList {
                width: 100%;
                height: 240px;
                margin-top: 20px;
                // background-color: wheat;
                overflow-x: hidden;
                overflow-y: auto;
                scrollbar-width: thin;
                scrollbar-color: rgb(36, 137, 204) #0e6ce0;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding-left: 2%;

                li {
                  width: 48%;
                  // background-color: khaki;
                  height: 60px;
                  list-style: none;
                  display: flex;
                  flex: none;

                  &:not(:nth-child(1), :nth-child(2)) {
                    margin-top: 15px;
                  }

                  img {
                    height: 60px;
                  }

                  p {
                    display: flex;
                    flex-direction: column;
                    margin-left: 10px;
                    justify-content: space-between;
                    padding: 6px 0 6px 0;

                    span {
                      &:nth-child(1) {
                        color: rgb(225, 220, 19);
                      }

                      &:nth-child(2) {
                        color: rgb(31, 104, 113);
                      }
                    }
                  }
                }

                &::-webkit-scrollbar {
                  border-radius: 10px;
                  /*滚动条整体样式*/
                  width: 6px;
                  /*高宽分别对应横竖滚动条的尺寸*/
                  height: 10px;
                  overflow-x: hidden;
                }

                &::-webkit-scrollbar-thumb {
                  /*滚动条里面小方块*/
                  border-radius: 10px;
                  box-shadow: inset 0 05px rgba(0, 0, 0, 0.2);
                  background: rgba(7, 132, 173, 0.5);
                }

                &::-webkit-scrollbar-track {
                  /*滚动条里面轨道*/
                  box-shadow: inset 0 05px rgba(0, 0, 0, 0.2);
                  border-radius: 10px;
                  background: rgb(10, 32, 52)
                }
              }
            }

          }
        }
      }
    }

    .signStep {
      width: 100%;
      height: 922px;
      overflow-x: hidden;
      overflow-y: auto;
      background: linear-gradient(to left, #00ffff, #00ffff) left top no-repeat,
        linear-gradient(to bottom, #00ffff, #00ffff) left top no-repeat,
        linear-gradient(to left, #00ffff, #00ffff) right top no-repeat,
        linear-gradient(to bottom, #00ffff, #00ffff) right top no-repeat,
        linear-gradient(to left, #00ffff, #00ffff) left bottom no-repeat,
        linear-gradient(to bottom, #00ffff, #00ffff) left bottom no-repeat,
        linear-gradient(to left, #00ffff, #00ffff) right bottom no-repeat,
        linear-gradient(to left, #00ffff, #00ffff) right bottom no-repeat;
      background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;
      margin-top: 20px;
      padding: 1px;

      .gradient {
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(6, 17, 44, 0.9), rgba(4, 28, 70, 0.9), rgba(6, 17, 44, 0.9));
        box-shadow: inset 1px 10px 100px #103660, inset 5px -5px 5px #103660, inset -5px 5px 5px #103660, inset -5px -5px 5px #000;
        border: 1px solid rgb(8, 101, 134);

        .partTitle {
          width: 100%;
          height: 76px;
          text-align: left;
          line-height: 76px;
          font-size: 26px;
          padding-left: 30px;
        }

        .signPeople {
          width: 100%;
          height: 30px;
          text-align: left;
          font-size: 20px;
          padding-left: 30px;
          display: flex;
          align-items: center;
          overflow: hidden;

          img {
            height: 40px;
            position: relative;
            top: 10px;
            left: 12px;
          }
        }

        .step {
          width: 720px;
          height: 660px;
          font-size: 16px;
          margin-left: 6%;
          margin-top: 10px;

          .el-step {
            height: 110px;
            flex-basis: inherit !important;

            .el-step__head {
              width: auto;

              .el-step__line {
                width: 2px;
                top: 79px;
                bottom: 0;
                left: 33px;
                background-color: #e1ba1d;
                border-color: #e1ba1d;
                height: 30px;
              }

              .el-step__icon {
                width: 70px;
                height: 70px;
                border-radius: 100%;
                border: 2px solid #e4c339;
                background-color: #676929;
                padding: 2px;

                img {
                  border-radius: 100%;
                  width: 60px;
                  height: 60px;
                  border: 2px solid #e4c339;
                }
              }
            }

            .el-step__main {
              .title {
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
                margin-left: 24px;
                font-size: 16px;

                p {
                  display: flex;
                  flex-direction: column;
                }
              }

              .el-step__description {
                margin-left: 24px;
                font-size: 16px;

                .isAgree {
                  display: flex;
                  align-items: flex-start;

                  textarea {
                    width: 520px;
                    height: 144px;
                    resize: none;
                    border-radius: 5px;
                    margin-left: 5px;
                    background-color: rgba(6, 16, 37, 0.6);
                    padding: 5px;
                    font-size: 16px;
                    border: 1px solid rgb(38, 154, 188);
                    outline: none;
                    resize: none;
                    box-shadow: inset 1px 10px 50px #103660, inset 5px -5px 5px #103660, inset -5px 5px 5px #103660, inset -5px -5px 5px #000;
                  }

                }

                .btnPart {
                  width: 100%;
                  display: flex;
                  justify-content: flex-end;
                  margin-top: 10px;

                  button {
                    width: 62px;
                    height: 38px;
                    padding: 0;
                    border-radius: 5px;
                    background-color: rgba(6, 112, 45, 0.6);
                    border: 1px solid #12f603;
                    outline: none;
                    color: #12f603;
                    cursor: pointer;

                    &:nth-child(2) {
                      background-color: rgba(113, 32, 49, 0.6);
                      border: 1px solid rgb(255, 57, 51);
                      color: rgb(255, 57, 51);
                      margin-left: 5px;
                    }
                  }
                }
              }
            }

          }
        }

        .copySendMain {
          width: 100%;
          height: 126px;
          // background-color: #f40;
          padding-left: 60px;

          .copySendMainList {
            width: 100%;
            display: flex;

            li {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin: 0 2%;

              i {
                display: block;
                width: 74px;
                height: 74px;
                border: 2px solid #e4c339;
                background-color: #676929;
                border-radius: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 5px 0;

                img {
                  width: 66px;
                  height: 66px;
                  border: 2px solid #e4c339;
                  border-radius: 100%;

                }
              }
            }
          }
        }
      }
    }
  }
}
